<template>
    <div class="collected page">
        <formHeader :title="'收款'" wColor></formHeader>
        <div class="con">
            <cube-scroll
                    ref="scroll"
                    :data="recordList"
                    :options="options"
                    @pulling-up="onPullingUp"
                    class="horizontal-scroll-list-wrap">
                <div class="top">
                    <div class="userInfo" v-if="user">
                        <div class="userImg" v-if="user.avatar">
                            <img :src="user.avatar">
                        </div>
                        <div class="desc">
                            <div class="name">{{user.name}}</div>
                            <div class="level">
                                {{level.name}}
                            </div>
                        </div>
                    </div>
                    <div class="asset">
                        <div class="title">我的资产</div>
                        <div class="num">{{(downIncome+waitIncome)?(downIncome+waitIncome).toFixed(2):'0.00'}}</div>
                    </div>
                    <div class="earn">
                        <div class="cell">
                            <div>已收款</div>
                            <div>{{downIncome?downIncome.toFixed(2):'0.00'}}</div>
                        </div>
                        <div class="cell">
                            <div>未收款</div>
                            <div>{{waitIncome?waitIncome.toFixed(2):'0.00'}}</div>
                        </div>
                    </div>
                </div>
                <div class="list">
                    <div
                        class="listItem"
                        @click="turn(record.fromUser.avatar,record.fromUser.name,record.record.amount,record.record.info,record.record.status,record.record.id,record.record.bus)"
                        v-for="(record,index) in recordList"
                        :key="index"
                    >
                     <!--   <div class="itemImg">
                            <img :src="record.fromUser.avatar" alt="">
                        </div>-->
                        <div class="desc">
                            <div class="info"><span class="msg">{{record.record.info.split(",")[0]}}</span> ({{typeList[record.record.type]}}--{{busType[record.record.bus]}})</div>
                            <div class="time">{{parseTime(record.record.time)}}</div>
                        </div>
                        <div class="right">
                            <div class="num">+{{record.record.amount}}</div>
                            <div v-if="record.record.status==0" @click.stop="getMoney(record.record.id,index)"><img src="./image/qushoukuan1.png" alt=""></div>
                            <div v-else><span class="skip">点击查看明细>></span></div>
                        </div>
                    </div>
                </div>
            </cube-scroll>
        </div>
    </div>
</template>

<script>
    import {paymenet,confirm} from "@/api/account"
    import {parseTime} from "@/common/js/time"
    import {info} from "@/api/user"
    import formHeader from '@/components/form-header'
    export default {
        name : "collection",
        components:{formHeader},
        activated() {
            const toast = this.$createToast({
                time: 0,
                txt: '正在加载',
                mask: true
            })
            toast.show()
            this.page=1
            this.getPayList(this.page)
            info().then(res=>{
                this.user = res.data
                this.level = res.extra.level
                toast.hide()
            })
        },
        data() {
            return {
                level:{},
                records: [],
                recordList:[],
                page:1,
                type:2,
                user:{},
                typeList:['代金券','积分','优惠券','换购券',"","","清货券","公益金"],
                busType:['调配','充值','货款','分享奖励','返还','支付','自动支付','区域奖励',"店铺利润","店铺管理利润","平级利润"],
                options:{
                    observeDOM: true,
                    click: true,
                    probeType: 1,
                    scrollbar: false,
                    pullDownRefresh: false,
                    pullUpLoad: true
                },
                downIncome:null,
                waitIncome:null
            }
        },

        computed: {
            // recordList () {
            //     let res = this.records.map(record => {
            //         return record
            //     })
            //     res = res.filter(r=>{
            //         let bus= r.record.bus
            //         if(bus==2||bus==3||bus==7||bus == 8 ||bus ==9){ // 只显示货款
            //             return true
            //
            //         }
            //         return false
            //     })
            //     console.log(res)
            //     return res
            //
            // },
            // total(){
            //     let done = 0
            //     let all = 0
            //     this.recordList.forEach(record=>{
            //         if(record.record.status==1){
            //             done+=record.record.amount
            //         }
            //         all+=record.record.amount
            //     })
            //     let tem  = {done,all}
            //     return tem
            // }
        },
        methods: {
            turn(avatar,name,amount,info,state,id,bus){
                this.$router.push({
                    path:'/wallet/collectdetail',
                    query:{
                        avatar,
                        name,
                        amount,
                        info,
                        state,
                        id,
                        bus
                    }
                })
            },
            parseTime(time) {
                return parseTime(time)
            },
            getPayList(page){
                paymenet(page).then(res => {
                    this.downIncome = res.extra.downIncome
                    this.waitIncome = res.extra.waitIncome
                    if (page==1){
                        this.recordList=res.data
                    }else {
                        this.recordList = this.recordList.concat(res.data)
                    }

                    this.page++
                })
            },
            onPullingUp(){
                this.getPayList(this.page)
            },
            getMoney(id,index){

                confirm(id).then(res=>{
                    this.recordList[index].record.status = 1
                    paymenet(1).then(res=>{
                        this.downIncome = res.extra.downIncome
                        this.waitIncome = res.extra.waitIncome
                    })
                })

            }
        }
    }
</script>

<style scoped lang="stylus">
.collected
    background-color $page-bg
    .con
        margin-top 47px
        height 100%
        .top
            height 255px
            background-image url('./image/bgimg2.png')
            background-size 100%
        .userInfo
            padding 18px 15px
            display flex
            .userImg
                img
                    width  50px
                    height  50px
                    border-radius 50%
            .desc
                margin-left 11px
                color #c8c9ce
                font-size 12px
                display flex
                flex-direction column
                justify-content center
                .level
                    margin-top 10px
                    border-radius 21px
                    color #fff
                    background-color #9597A1
                    padding 5px 10px
        .asset
            display flex
            justify-content center
            align-items center
            flex-direction column
            padding-top 25px
            color #75552B
            .title
                font-size 15px
            .num
                font-size 24px
                font-weight bold
                font-family DIN
                margin-top 15px
        .earn
            display flex
            padding 25px 30px
            .cell
                flex 50%
                display flex
                justify-content center
                align-items center
                flex-direction column
                color #75552B
                font-size 15px
                div
                    margin-bottom 11px
    .list
        background-color #fff
        margin-top 10px
        .listItem
            display flex
            justify-content space-between
            align-items center
            padding-top 15px
            border-bottom 1px solid #eee
            /*padding-bottom 16px*/
            .itemImg
                img
                    width: 38px
                    height: 38px
                    margin-left 5px
                    border-radius 50%
            .desc
                flex 1
                margin-left 10px
                padding-bottom 16px

                .info
                    font-size 14px
                    color #333
                    /*white-space nowrap*/
                    /*text-overflow ellipsis*/
                    /*overflow hidden*/
                    /*max-width 250px*/
                    .msg
                        white-space nowrap
                        text-overflow ellipsis
                        overflow hidden
                        max-width 120px
                .time
                    color #A8A8A8
                    font-size 11px
                    margin-top 15px
            .right
                padding-bottom 10px
                padding-right 15px
                .num
                    color #CAA76E
                    font-size 16px
                    font-family DIN
                    text-align right
                    margin-right 16px
                img
                    width: 68px
                    height: 24px
                    margin-top 5px
                .skip
                    color #999999
                    font-size 11px
</style>
